import { Component } from 'react'

// react的事件需要使用 小驼峰 onMouseMove
// 原生js onmounsemove
// react 事件满足两个条件： 第一必须是事件，第二this指向当前的组件
class App extends Component {
  // react 类组件的初始化状态，类似于vue中的data
  state = { 
    x: 0,
    y: 0
  }

  render() { 
    return (
      <div style={ { width: '100vw', height: '100vh', backgroundColor: '#f66'} } onMouseMove = { (event) => {
        console.log(event)
        // 修改初始化值
        this.setState({
          x: event.clientX,
          y: event.clientY
        })
      } }>
        <p>
          当前鼠标的位置在，x：{ this.state.x },y: { this.state.y }
        </p>
      </div>
    )
  }
}
 
export default App;